<template>
    <div class="gray-body w750" :class="[Nomsg ? 'white-bg' : '', themes.theme]">
        <template v-if="parcelArr.length > 1">
            <van-tabs v-model="active" :swipe-threshold="4" :color="themes.color" :title-active-color="themes.color" @change="switchType">
                <van-tab :title="item.name" v-for="(item, index) in parcelArr" :key="index"></van-tab>
            </van-tabs>
        </template>

        <div class="order-list mt" v-if="logisticsInfor">
            <template v-if="logisticsInfor && logisticsInfor[index]">
                <div class="list-item" >
                    <div class="item-tit">
                        <div class="order-num"><span class="num">商品信息</span></div>
                    </div>
                    <div class="pro-mes clearfix" >
                        <div class="pro-img" v-for="(item, i) in logisticsInfor[index].prods" :key="i">
                            <legend-image :pic="item.pic" :isJD="item.prodSource == 'JD'" :options="{ w: '160', h: '160' }" />
                        </div>
                        <template v-if="logisticsInfor[index].prods.length == 1">
                            <div class="pro-name">
                                <div class="name">{{ logisticsInfor[index].prods[0].prodName }}</div>
                                <div class="sku">{{ logisticsInfor[index].prods[0].attribute }}</div>
                                <span class="price">
                                    ￥
                                    <em class="now">{{ Money(logisticsInfor[index].prods[0].price)[0] }}</em>
                                    .{{ Money(logisticsInfor[index].prods[0].price)[1] }}
                                </span>
                            </div>
                        </template>
                    </div>
                </div>
            </template>
        </div>

        <div class="logistics-msg" style="margin-top: 10px">
            <!-- 物流公司图片(暂时没用) -->
            <!-- <div class="msg-img"><img :src="$imgUrlHead+logisticsData.dvyPic"></div> -->
            <div class="msg-det">
                <span class="det-txt" v-if="logisticsInfor[index]">
                    物流状态：
                    <span class="det-span cur">{{ stateText(logisticsInfor[index].state) }}</span>
                </span>
                <template v-if="logisticsInfor[index]">
                    <span class="det-txt">
                        承运来源：
                        <span class="det-span">{{ logisticsInfor[index].name }}</span>
                    </span>
                    <span class="det-txt">
                        运&nbsp;单&nbsp;号&nbsp;：
                        <span class="det-span">{{ logisticsInfor[index].dvyFlowId }}</span>
                    </span>
                </template>
            </div>
        </div>

        <template v-if="logisticsInfor[index]">
            <template v-if="logisticsInfor[index].data">
                <div class="logistics-follow" v-if="logisticsInfor[index].data">
                    <p class="follow-tit">物流跟踪</p>
                    <div class="follow-con">
                        <div
                            class="logistis-det"
                            :class="index == 0 ? 'cur' : ''"
                            v-for="(item, index) in JSON.parse(logisticsInfor[index].data)"
                            :key="index"
                        >
                            <p class="det-p">{{ item.context }}</p>
                            <span class="det-span">{{ item.ftime }}</span>
                        </div>
                    </div>
                </div>
            </template>

            <template v-else-if="!logisticsInfor[index].data">
                <Noempty :pic="require('@/assets/images/order-empty.png')" title="暂无物流信息" />
            </template>
        </template>
    </div>
</template>

<script>
import { orderLogistics, integralLogistics } from 'api/order'
import cash from 'utils/tool'
import Noempty from 'components/Noempty/Noempty'
import legendImage from 'components/legendImage/legendImage'
import { mapState } from 'vuex'
export default {
    data() {
        return {
            Money: cash, //价格转换
            active: '',
            index: 0,
            logistics: false,
            Nomsg: false,
            title: '',
            logisticsArr: [],
            logisticsData: {},
            //是否显示包裹切换 大于1才显示
            parcelArr: [],
            logisticsInfor: [] //物流信息
        }
    },
    mounted() {
        let that = this

        let prames = {
            subNumber: this.$route.query.subNumber,
            reciverMobile: this.$route.query.reciverMobile
        }

        orderLogistics(prames).then((res) => {
            if (res.status != 1) {
                this.$toast(res.msg)
                return
            }
            const parcel = res.result

            parcel.length > 1 &&
                (this.parcelArr = new Array(parcel.length).fill().map((v, i) => {
                    return { name: `包裹${i + 1}`, index: i }
                }))
            this.logisticsInfor = res.result
        })
    },
    methods: {
        switchType(e) {
            this.index = e
        }
    },
    computed: {
        ...mapState(['themes']),
        stateText(state) {
            return function (state) {
                const stateText = {
                    '-1': '暂无物流信息',
                    0: '在途',
                    1: '揽收',
                    2: '疑难',
                    3: '签收',
                    4: '退签',
                    5: '派件',
                    6: '退回',
                    7: '转投',
                    10: '待清关',
                    11: '清关中',
                    12: '已清关',
                    13: '清关异常',
                    14: '收件人拒签'
                }
                return stateText[state]
            }
        }
    },
    components: {
        Noempty,
        legendImage
    }
}
</script>

<style src="@/assets/css/order.css" scoped></style>
<style>
@import '../../assets/css/logistics.css';
@import '../../assets/css/style/my-style.css';
.order-list .list-item {
    margin-top: 0 !important;
    border-radius: 0 !important;
}
.order-list .list-item .pro-mes .pro-img {
    position: relative;
}
.order-list .list-item .pro-mes .pro-img {
    display: block;
    margin-left: 10px;
    width: 80px;
    height: 80px;
    overflow: hidden;
    cursor: pointer;
    background: #fff;
    border-radius: 5px;
}
.order-list .list-item .pro-mes .pro-img .text {
    position: absolute;
    width: 100%;
    bottom: 0;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    font-size: 12px;
    left: 0;
}
</style>
